<template>
  <div id="cesiumContainer"></div>
</template>

<script setup>
import { onMounted } from 'vue'
import * as Cesium from 'cesium'

// 等组件挂载成功后实例
onMounted(async () => {
  const defaultAccessToken =
    'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIzZTU0NzgzYS0xNWNjLTRmZmEtOGQzMi1lY2JmM2IwNzUzMjIiLCJpZCI6MjUwMzcwLCJpYXQiOjE3Mjk3MzU0OTN9.ulTss00xhgzkk6fqIWqBvlIqfO3A0xMEtYUrST9zTL8'

  Cesium.Ion.defaultAccessToken = defaultAccessToken
  // 所有API的开始--控件
  const viewer = new Cesium.Viewer('cesiumContainer', {})
  // entity -线
  const polyline = viewer.entities.add({
    polyline: {
      // 笛卡尔坐标数组
      positions: Cesium.Cartesian3.fromDegreesArray([
        120, 20, 121, 20, 121, 20.5,
      ]),
      width: 10,
      material: Cesium.Color.YELLOW,
    },
  })
  viewer.zoomTo(polyline)
})
</script>



<style scoped>
#cesiumContainer {
  width: 100vw;
  height: 100vh;
}
:deep(.cesium-widget-credits) {
  display: none;
}
</style>
